<template>
  <!-- 头部 -->
  <view class="my">
    <view class="my-header" @tap='goLogin'>
      <view class="header-main">
        <view class="header-content">
          <image class="logo-img" :src="userInfo.img_url || '/static/userImg/icons3.png'" @tap="chooseAvatar" mode="aspectFill" />
          <view class="info-container">
            <view class="name-wrapper">
              <image class="user-type-icon" :src="userTypeIcon" mode="aspectFit" />
              <text class="logo-name">{{ userInfo.userName || '未登录' }}</text>
            </view>

            <!-- 新增：余额 & 积分 -->
            <view class="stats">
              <view class="stat-item">
                <image class="stat-icon" src="/static/img/balance.png" mode="aspectFit" />
                <text class="balance">余额：{{ formattedBalance }}</text>
              </view>
              <view class="stat-item">
                <image class="stat-icon" src="/static/img/points.png" mode="aspectFit" />
                <text class="points">积分：{{ points }}</text>
              </view>
            </view>

          </view>
        </view>
      </view>
    </view>
    <!--内容列表-->
    <view class="my-content">
      <view class="my-content-item" @click="navigateTo('userinfo')">
          <view class="text-with-icon">
            <image class="item-icon" src="/static/img/user_img.png" mode="aspectFit" />
            用户信息
          </view>
        <view class="mark"> > </view>
      </view>

      <view class="my-content-item" @click="navigateTo('history')" >
        <view>
          <image class="item-icon" src="/static/img/history_order.png" mode="aspectFit" />
          订单历史
        </view>
        <view class="mark"> > </view>
      </view>

      <view class="my-content-item"  >
      <view>
        <image class="item-icon" src="/static/img/quan.png" mode="aspectFit" />
        我的优惠券
      </view>
        <view class="mark"> > </view>
      </view>

      <view class="my-content-item"  @click="navigateTo('vip')" >
        <view>
          <image class="item-icon" src="/static/img/vip.png" mode="aspectFit" />
          会员权益
        </view>
        <view class="mark"> > </view>
      </view>

    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      avatarUrl: null, // 存储用户选择的头像路径
    }
  },
  computed: {
    ...mapState({
      loginStatus: state => state.user.loginStatus,
      userInfo: state => state.user.userInfo // 从 store 中获取用户信息
    }),
    userTypeIcon() {
      return this.isVip ? '/static/img/user-vip.png' : '/static/img/user-normal.png'
    },
    formattedBalance() {
      return parseFloat(this.balance).toFixed(2);
    },
    ...mapState('balanceAndPoints', ['balance', 'points', 'isVip'])
  },
  methods: {
    ...mapActions('balanceAndPoints', ['updateBalance', 'updatePoints']),

    navigateTo(page) {
      let url = '';
      switch (page) {
        case 'userinfo':
          url = '/pages/tabbar/tabbar-5-detail/userinfo'; // 替换为实际路径
          break;
        case 'review':
          url='/pages/tabbar/tabbar-4-detail/review';
          break;
        case 'vip':
          url='/pages/tabbar/tabbar-1-detail/vip';
          break;
        case 'history':
          url= '/pages/tabbar/tabbar-4-detail/order-list'
          break;
        default:
          return;
      }
      uni.navigateTo({
        url: url
      });
    },
    goLogin() {
      console.log('当前登录状态:', this.loginStatus); // 添加调试信息
      // 判断是否登录，未登录则跳转到登录页
      if (!this.loginStatus) {
        console.log('未登录，跳转到登录页'); // 添加调试信息
        uni.redirectTo({
          url: '/pages/login/login'
        });
      } else {
        console.log('已登录，显示我的页面'); // 添加调试信息
      }
    },
    async chooseAvatar() {
      try {
        const [err, res] = await uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album']
        });

        if (err) {
          uni.showToast({ title: '选择失败', icon: 'none' });
          return;
        }

        this.avatarUrl = res.tempFilePaths[0]; // 设置本地临时路径
        uni.showToast({ title: '选择成功' });

        // 如果你需要上传头像到服务器，可以取消注释下面这行
        this.uploadAvatar(res.tempFilePaths[0]);

      } catch (error) {
        uni.showToast({ title: '发生错误', icon: 'none' });
      }
    },
  }
}
</script>

<style>
page {
  background-color: #eaeaea; /* 页面整体底色 */
}
</style>

<style scoped>

.my-header {
  background: bisque;
  background-size: cover;
  width: 100%;
  height: 300rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-main {
  width: 100%;
  padding: 0 40rpx;
}

.header-content {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 16rpx;
  padding: 20rpx;
}

.logo-img {
  width: 140rpx;
  height: 140rpx;
  border: 2rpx solid #FFFFFF;
  border-radius: 50%;
  background-color: #FFFFFF;
  margin-right: 30rpx;
  margin-left: 20rpx;
}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-type-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
  vertical-align: middle;
}

.name-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.logo-name {
  font-size: 34rpx;
  color: black;
  font-weight: bold;
  margin-bottom: 10rpx;
  height: 40rpx;
}

.stats {
  display: flex;
  font-size: 28rpx;
  color: #666;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.stat-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

.balance {
  margin-right: 20rpx;
}

.points {
  margin-right: 0; /* 最后一个不加右边距 */
}


.my-content{
  margin:20rpx 0;
  padding: 0 20rpx;
  background-color: white;
}
.text-with-icon {
  display: flex;
  align-items: center; /* 底部对齐 */
  height: 100%;
}
.my-content-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2px solid lightgray;
  margin-bottom: 20rpx;
  font-weight: bold;
  font-size: 33rpx;
}
.item-icon {
  width: 45rpx;
  height: 45rpx;
  margin-right: 30rpx;
  margin-left: 15rpx;
  vertical-align: middle;
}
.mark{
  padding-right:10rpx ;
}
</style>
